<template>
	<view class="main">
		<u-gap height="20" bg-color="#f8f8f8">></u-gap>
		<view class="top_card">
			<view class="top_card_title">
				<view class="top_card_title_left">
					{{topData.planName}}
				</view>
				<!-- <view class="top_card_title_icon">   
					{{state(topData.planStatus)}}
				</view> -->
				<view class="top_card_title_icon" :class="{
				'in_progress':state(topData.planStatus) == '进行中',
				'done':state(topData.planStatus) == '已完成',
				'close':state(topData.planStatus) == '已关闭'
				}">
					{{state(topData.planStatus)}}
				</view>
			</view>
			<view class="top_card_content">
				<view class="m-t-20">
					执行成员：{{topData.planUserName}}
				</view>
				<view class="m-t-12">
					目标患者：{{topData.targetCustomerNum}}人
				</view>
				<view class="m-t-12">
					计划周期：{{topData.planStartTime}} 至 {{topData.planEndTime}}
				</view>
				<view class="m-t-12 p-b-24">
					{{topData.createTime}}由 {{topData.createUser}} 创建
				</view>
			</view>
		</view>
		<u-gap height="20" bg-color="#f8f8f8">></u-gap>
		<!-- 未对接 -->
		<view class="progress">
			<view class="line_title">
				任务执行情况
			</view>
			<view class="m-t-24">
				<view class="show_num" >
					<view class="show_box" v-for="n in jobDoneList">
						<view class="day_num">
							{{n.num}}
						</view>
						<view class="day_title">
							{{n.title}}
						</view>
					</view>
				</view>
			</view>
			<view class="m-t-30">
				<view class="progress_line">
					任务当前执行进度：{{percent}}%
				</view>
				<view class="m-t-8 m-b-32">
					<u-line-progress  :show-percent="false" active-color="#4DC0D9" :percent="percent"></u-line-progress>
				</view>
			</view>
		</view>
		<u-gap height="20" bg-color="#f8f8f8">></u-gap>
		<view class="done_list">
			<view class="line_title" style="border-bottom: 1px solid #f7f7f7;padding-bottom: 24rpx;">
				任务执行情况
			</view>
			<view class="rule_box">
				<view class="rule_card" v-for="n in jobList" :key="n.jobName">
					<view class="rule_step">
						<view class="dot">
							<u-image :src="setpTime" width="24rpx" height="24rpx"></u-image>
							<view class="time_title">
								{{n.jobStartTime}}
							</view>
						</view>
			
						<view class="dash">
			
						</view>
					</view>
					<view class="rule_content">
						<view class="" >
							<view  class="rule_content_title">
								<view class="base_icon zhouqi" :class="{'zhouqi':n.jobType == 2,'dingshi':n.jobType == 1}">
									{{n.jobType == 1 ? '定时' : '周期'}}
								</view>
								<view class="m-l-10">
									{{cultString(n.jobName,14)}}
								</view>
							</view>
							<view class="rule_content_details">
								{{cultString(n.jobContent,35)}}
							</view>
							<view class="rule_content_action">
								<view class="edit" >
									已完成：<span style="color: #333;">{{n.jobCompleteNum}}</span>
								</view>
								<view class="del" >
									完成率：<span style="color: #333;">{{n.jobCompleteRate}}%</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 未对接 -->
		<u-modal v-model="show" :content="content" @confirm="confirm" :content-style="{'color':'#333','fontWeight':'bold'}" :show-cancel-button="true" confirm-color="#4DC0D9" :show-title="false"></u-modal>
		<!-- 2个为340  3个为218 -->
		<view class="my_sticky">
			<view class="abord" :class="{'two':topData.planStatus != 0,'three':topData.planStatus == 0}" @click="abord" v-if="[0,1].includes(topData.planStatus)">
				终止计划
			</view>
			<view class="bianji" :class="{'two':topData.planStatus != 0,'three':topData.planStatus == 0}" @click="edit" v-if="topData.planStatus == 0">
				编辑计划
			</view>
			<view class="chakan" :class="{'two':topData.planStatus != 0,'three':topData.planStatus == 0,'one':[2,-1,-2].includes(topData.planStatus)}" @click="check">
				查看计划
			</view>
		</view>
		<go-nav></go-nav>
	</view>
</template>

<script>
	import {getFollowupPlanDetails,getFollowupPlanJobByPlanId,cancelJob,selectFollowupPlanJobCount} from '@/api/index.js'
	export default {
		data() {
			return {
				show:false,
				content:'计划终止后不会影响已完成的任务，但未执行或进行中的任务将不再继续执行，且此操作不可逆转，确定要终止计划吗？',
				setpTime: require('@/static/icon/Time node@2x.png'),
				jobDoneList: [{
						title: '总任务',
						num: 0
					},
					{
						title: '已完成',
						num: 0
					},
					{
						title: '未完成',
						num: 0
					},
				],
				topData:'',   //顶部数据
				percent:0,   //进度条数值
				jobList:[
					// {  //添加任务规则页面
					// 	jobStartTime:'2024-06-17 10:26',
					// 	jobType: '1', //任务类型  1定时 2周期
					// 	jobName: '鼻咽癌康复训练定期跟踪', //任务名称
					// 	jobContent: '【随访】您好，请认真填写康复训练问卷调查，以便于我们根据随访内容对您的康复情况做出解读并制...', //任务内容
					// 	jobCompleteNum: '1', //已完成
					// 	jobCompleteRate: '16.6%' //完成率
					// },
					// {  //添加任务规则页面
					// 	jobStartTime:'2024-06-15 10:26',
					// 	jobType: '2', //任务类型  1定时 2周期
					// 	jobName: '鼻咽癌康复训练II期跟踪', //任务名称
					// 	jobContent: '【随访】您好，请认真填写康复训练问卷调查，以便于我们根据随访内容对您的康复情况做出解读。', //任务内容
					// 	jobCompleteNum: '2', //已完成jobCompleteNum				
					// 	jobCompleteRate: '33.3%' //完成率
					// }
				],
				//planId:'',
				planId:'113ab72bf8734522914c8c844c65a86d', 
			};
		},
		computed: {
			cultString(val, num) {
				return (val, num) => {
					let myString = val.toString()
					if (val.length > num) {
						return val.slice(0, num) + '...'
					} else {
						return val
					}
				}
			},
			state(num) {
				return (num) => {
					switch (num) {
						case 0:
							return '待开始'
						case 1:
							return '进行中'
						case 2:
							return '已完成'
						case -1:
							return '已关闭'
						case -2:
							return '已过期'
						default:
							return '待开始'
					}
				}
			}
		},
		onLoad(obj) {
			if(obj.planId){
				this.planId = obj.planId
				this.getContent(obj.planId)
				this.getlist(obj.planId)
				this.topResult(obj.planId)
			}
		},
		methods:{
			async topResult(planId){
				let res = await selectFollowupPlanJobCount(planId)
				if(res.code == 200){
					this.jobDoneList[0].num = res.data.jobNum   //总任务
					this.jobDoneList[1].num = res.data.jobCompleteNum   //已完成
					this.jobDoneList[2].num = res.data.jobUnCompleteNum   //未完成
					this.percent = res.data.jobCompleteRate  //进度条数值
				}
				console.log(res,'topResult');
			},
			
			async getContent(planId){
				let res = await getFollowupPlanDetails(planId)
				this.topData = res.data
				//console.log(res);
			},
			async getlist(planId){
				let res = await getFollowupPlanJobByPlanId(planId)
				this.jobList = res.data
			},
			abord(){
				this.show = true
			},
			async confirm(){
				let res = await cancelJob(this.planId)   //id
				if(res.code == 200){
					this.$u.toast('计划终止成功',3000)
					this.getlist(this.planId)
					this.topResult(this.planId)
				}else{
					this.$u.toast(res.msg,3000)
				}
			},
			edit(){  //编辑
				// this.$store.commit('JobEditMock')
				if(this.topData.planStatus == 0){
					uni.navigateTo({
						url:`/pages/follow/newproject?planId=${this.planId}&isShow=false`
					})
				}else{
					this.$u.toast('只有待开始的状态才能编辑计划',2500)
				}
			},
			check(){
				uni.navigateTo({
					url:`/pages/follow/newproject_view?planId=${this.planId}&isShow=true`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		.top_card {
			padding: 0 24rpx;

			.top_card_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 24rpx;
				.top_card_title_left {
					font-weight: bold;
					font-size: 34rpx;
					color: #212121;
					line-height: 40rpx;
				}

				.top_card_title_icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 118rpx;
					height: 48rpx;
					background-color: #F2F2F2;
					border-radius: 200rpx;
					font-weight: bold;
					font-size: 26rpx;
					color: #333333;
					line-height: 30rpx;
				}
				
				.in_progress {
					background-color: #E5F4FF;
					color: #189AFF;
				}
				
				.done {
					background-color: #E2FFF2;
					color: #36B278;
				}
				
				.close {
					background-color: #F1F2F4;
					color: #999999;
				}
			}

			.top_card_content {
				font-weight: 500;
				font-size: 30rpx;
				color: #666666;
				line-height: 35rpx;
			}
		}

		.progress {
			padding: 0 24rpx;

			.show_num {
				display: flex;
				justify-content: space-around;
				.show_box{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 218rpx;
					height: 152rpx;
					background-color: #F8F8F8;
					.day_num{
						font-weight: 800;
						font-size: 40rpx;
						color: #333333;
						line-height: 47rpx;
						text-align: center;
					}
					.day_title{
						margin-top: 8rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #999999;
						line-height: 33rpx;
						text-align: center;
					}
				}
			}
			.progress_line{
				font-weight: 500;
				font-size: 28rpx;
				color: #212121;
				line-height: 33rpx;
			}
		}

		.done_list {
			padding: 0 24rpx;
			
			.rule_box {
				background-color: #ffffff;
				padding-bottom: 700rpx;
				.rule_card {
					padding-top: 24rpx;
					padding-left: 24rpx;
					height: 304rpx;
					display: flex;
					flex-direction: column;
					//align-items: center;
					justify-content: center;
			
					.rule_step {
						.dot {
							display: flex;
							align-items: center;
							.time_title {
								margin-left: 8rpx;
								font-weight: 500;
								font-size: 32rpx;
								color: #999999;
								//line-height: 1.5;
							}
						}
					}
			
					.rule_content {
						//padding-left: 40rpx;
						padding-left: 24rpx;
						margin-left: 5px;
						height: 266rpx;
						border-left: 1px dashed #ccc;
						font-weight: bold;
						font-size: 34rpx;
						color: #212121;
						line-height: 42rpx;
						.rule_content_title{
							margin-top: 6rpx;
							display: flex;
							align-items: center;
							.base_icon {
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 4rpx 6rpx 6rpx 6rpx;
								width: 70rpx;
								height: 40rpx;
								background: #FF8D07;
								font-weight: 500;
								font-size: 24rpx;
								color: #FFFFFF;
								text-align: center;
								line-height: 28rpx;
								border-radius: 8rpx;
							}
							
							.zhouqi {
								background: #FF8D07;
							}
							
							.dingshi {
								background-color: #4DC0D9;
							}
						}
						.rule_content_details{
							margin-top: 12rpx;
							padding-right: 24rpx;
							font-size: 30rpx;
							color: #666666;
							line-height: 1.5;
						}
						.rule_content_action{
							margin: 20rpx 24rpx 60rpx 0;
							display: flex;
							//justify-content: flex-end;
							font-weight: 500;
							font-size: 30rpx;
							color: #666;
							line-height: 1.5;
							.edit{
								margin-right:48rpx;
							}
							.del{
								
							}
						}
					}
				}
			}
		}
	}
	.my_sticky{
		position: sticky;
		z-index: 10;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		padding-bottom: 68rpx;
		border-top: 1px solid #e8e8e8;
		padding-top: 16rpx;
		background-color: white;
		.three{
			width:218rpx;
		}
		.two{
			width: 340rpx;
		}
		.one{
			width: 700rpx;
		}
		.abord{
			height: 68rpx;
			background: #F2F2F2;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #212121;
			line-height: 38rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.bianji{
			height: 68rpx;
			background: #4DC0D9;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 38rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.chakan{
			height: 68rpx;
			background: #4DC0D9;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 38rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.line_title {
		margin-top: 24rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #212121;
		line-height: 38rpx;
		position: relative;
		// width: 200px;
		padding-left: 20rpx;

		&::before {
			content: '';
			position: absolute;
			z-index: 100;
			top: 0;
			left: 0;
			width: 8rpx;
			height: 40rpx;
			background-color: #4DC0D9;
			display: block;
		}
	}
</style>